<template>
  <div class="dashboard">
    <el-row :gutter="10">
      <el-col :span="7">
        <xjh-card title="分类商品数量(饼图)">
          <pie-echart :data="categoryGoodsCountData"></pie-echart>
        </xjh-card>
      </el-col>
      <el-col :span="10">
        <xjh-card title="不同城市商品销量(饼图)">
          <map-echart :map-data="addressGoodsSale"></map-echart>
        </xjh-card>
      </el-col>
      <el-col :span="7">
        <xjh-card title="分类商品数量(玫瑰图)">
          <xjh-echart :options="{}"></xjh-echart>
        </xjh-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="card-row">
      <el-col :span="12">
        <xjh-card title="分类商品的销量">
          <xjh-echart :options="{}"></xjh-echart>
        </xjh-card>
      </el-col>
      <el-col :span="12">
        <xjh-card title="分类商品的收藏">
          <xjh-echart :options="{}"></xjh-echart>
        </xjh-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { useStore } from '@/store';

import xjhCard from '@/base-ui/card';
import xjhEchart from '@/base-ui/echart';
import PieEchart from '@/components/page-echarts/src/pie-echart.vue';
import MapEchart from '@/components/page-echarts/src/map-echart.vue';

const store = useStore();
store.dispatch('dashboard/getDashBoardDataAction');

// 这样的any 我是真的有点那种味道在里面了..
const categoryGoodsCountData = computed<any>(() => {
  return store.state.dashboard.categoryGoodsCount.map((item: any) => {
    return { value: item.goodsCount, name: item.name };
  });
});

const addressGoodsSale = computed<any>(() => {
  return store.state.dashboard.addressGoodsSale.map((item: any) => {
    return { value: item.count, name: item.address };
  });
});
</script>

<style scoped lang="less">
.card-row {
  margin-top: 10px;
}
</style>
